import React, { Component } from "react";
import { connect } from "dva";
import dynamic from "umi/dynamic";
import { Button,Modal,Form } from "antd";
import Table from "components/TableWrapper";
import { getTemplateList } from "../services/index";
import Columns from "./EventColumns";
import SearchForm from "./Search";
import styles from "./EventManagemetList.less";


const EventCompensate = dynamic({ loader: async () => {
  return import("./EventCompensate.jsx");
},
});
class EventManagemetList extends Component {
  constructor(props) {
  super(props);
  this.state = {
    eventCompensateVisible: false,
    eventCompensateData: {},
  };
 }

  componentWillUnmount(){
    this.updateQuery({});
  }


  updateQuery = (query) => {
    const { dispatch } = this.props;
    dispatch({
      type: "event/save",
      payload: {
        query,
      },
    })
  };

  reload = () => {
    this.tableRef.fetch();
  };

  handleReset = () => {
    this.formRef.resetFields();
    this.updateQuery({});
    this.reload();
  };

  handleEventCompensateVisible = () => {
  const { eventCompensateVisible } = this.state;
   this.setState( {eventCompensateVisible :!eventCompensateVisible});

  };

  handleSumbit = (query) => {
    this.updateQuery(query);
  };
  handlePay1 = (record) => {
     this.handleEventCompensateVisible();
     const { eventCompensateData } = this.state; // eslint-disable-line no-unused-vars
     this.setState({eventCompensateData:{
      id:record.id,
      requestJsonParams: record.requestBody,
      requestUrl: record.callbackContent,
     }});
  }

  handlePay2=(form)=>{
    const { eventCompensateData } = this.state;
    this.setState( {
     eventCompensateData:{
      id:eventCompensateData.id,
      requestJsonParams : form.requestJsonParams,
      requestUrl: form.requestUrl,
    }});
  }



  handlePay = (form) => {
    const { eventCompensateData } = this.state;
    const { dispatch } = this.props;
    this.handleEventCompensateVisible();
    dispatch({
      type: "event/handlePay",
      payload: {
        requestJsonParams: form.requestJsonParams,
        requestUrl: form.requestUrl,
        id: eventCompensateData.id,
      },
    }).then((res) => {
      const result=res.datas;
      const message=res.errMsg;
      let resultTitle;
      if (res.errCode === 0) {
        resultTitle="补偿成功";
      }
      else{
        resultTitle="补偿失败";
      }
      Modal.confirm({
        width: "500px",
        height: "500px",
        centered:true,
        title: resultTitle,
        onOk:()=>{this.handleReset()},
        content:(
          <Form>
            <Form.Item label="接口返回message">
              <textarea rows="1" cols="50" value={message} readOnly />
            </Form.Item>
            <Form.Item label="接口返回datas">
              <textarea rows="2" cols="50" value={JSON.stringify(result)} readOnly />
            </Form.Item>
          </Form>),
        cancelText:"取消",
        okText:"确认",
      });

    });
  };


  render() {
    const {
      eventCompensateVisible,
      eventCompensateData,
    } = this.state;
    const columns = Columns(this.handlePay1);

    const { query, tenantList } = this.props;

    const Buttonwrap = (
      <div>
        <Button
          type="primary"
          onClick={this.handleSumbit}
          style={{ marginRight: "8px" }}
        >
          查询
        </Button>
        <Button onClick={this.handleReset}>重置</Button>
      </div>
    );

    return (
      <div className={styles.root}>
        <div className={styles.listform}>
          <div className={styles.search}>
            <SearchForm
              onRef={(f) => {
                this.formRef = f;
              }}
              Buttonwrap={Buttonwrap}
              tenantList={tenantList}
            />
          </div>
        </div>
        <div className={styles.content}>
          <Table
            rowKey="id"
            onRef={(r) => {
              this.tableRef = r;
            }}
            api={getTemplateList}
            columns={columns}
            query={{
              ...query,
              // order: query.order || "desc",
              // sort: query.sort || "gmt_modified",
            }}
            reOrder
          />
          <EventCompensate
            visible={eventCompensateVisible}
            handleEventCompensateVisible={this.handleEventCompensateVisible}
            eventCompensateData={eventCompensateData}
            handlePay2={this.handlePay}
          />
        </div>
      </div>
    );
  }
}

export default connect(({ event, loading }) => ({
  query: event.query,
  loading,
}))(EventManagemetList);
